import React from './react';
import ReactDom from './react-dom';
const style = {
  border: '1px solid red',
};

class ChildComponent extends React.Component {

  componentWillMount() {
    console.log('1.child componentWillMount');
  }
  componentDidMount() {
    console.log('2.child componentDidMount');
  }
  componentWillReceiveProps() {
    console.log('7.child componentWillReceiveProps');
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('4.child shouldComponentUpdate');
    return nextProps.number % 3 === 0;
  }
  componentWillUpdate() {
    console.log('5.child componentWillUpdate');
  }
  componentDidUpdate() {
    console.log('6.child componentDidUpdate');
  }
  render() {
    console.log('6.child render');
    // console.log(this.props);
    // return this.props.children;
    return (
      <div>
        <p> child number</p>
        {this.props.number}
      </div>
    );
  }
}
class ClassComponent extends React.Component {
  state = {
    number: 0,
  };

  componentWillMount() {
    console.log('1.componentWillMount');
  }
  componentDidMount() {
    console.log('3.componentDidMount');
  }
  componentWillReceiveProps() {
    console.log('7.componentWillReceiveProps');
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('4.shouldComponentUpdate');
    return nextState.number % 2 === 0;
  }
  componentWillUpdate() {
    console.log('5.componentWillUpdate');
  }
  componentDidUpdate() {
    console.log('6.componentDidUpdate');
  }
  handleClick = () => {
    this.setState((state) => ({ number: state.number + 1 }));
    console.log('handleclick', this.state.number);
    /* this.setState((state) => ({ number: state.number + 1 }));
    console.log('handleclick', this.state.number);
    setTimeout(() => {
      this.setState({ number: this.state.number + 1 });
      console.log('handleclick', this.state.number);
      this.setState({ number: this.state.number + 1 });
      console.log('handleclick', this.state.number);
    }, 1000); */
  };
  render() {
    console.log('2.render');
    console.log(this.props.children);
    return (
      <div id="class-component">
        <h1> class component!!!!!!</h1>
        <p>number: {this.state.number}</p>
        <p>{this.props.name}</p>
        {this.state.number === 4 ? null : (
          <ChildComponent number={this.state.number}>
            <div>11</div>
            {null}
            {undefined}
            {0}
            {false}
            <div>222</div>
          </ChildComponent>
        )}
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}

const element = (
  <div id="container" style={style}>
    <ClassComponent name="class component" />
  </div>
);

ReactDom.render(element, document.getElementById('root2'));
